<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <link href="/public/static/css/guahao.css?444" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/public/static/css/layer.css" >
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="/public/static/js/layer.js"></script>
    <title>乐8预约</title>
    <style>
        .circle{
            width: 50px;
            height: 50px;
            background-color:#86dda6;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            text-align: center;
            line-height: 50px;;
        }
        .circle a{
            color: #FFF;
            font-size: 16px;
        }
        .reserve_info img{
            width:100%;
        }
    </style>
</head>
<body>
<div id="dg" style="z-index: 9999; position: fixed ! important; right: 5%; top: 80%;">
    <div class="circle">
        <a href="{:url(MODULE_NAME.\'/home\')}">主页</a>
    </div>
</div>
<div>
    <img style="width: 100%;" src="/public/static/images/my-bj2.jpg">
</div>
<div class="doctor-top" style="margin-top:10px;">
    <div id="date-picker" class="subnav-top ft16"  style="display: block;">
        <dl class="dlc"> <!-- style="background-color: #86dda6;" -->
            {volist name="data" id="vo"}
            <dd class="date-item"
                onclick="scheduleDoctorSelect('{$vo[reserve_date]}',this)">
                <p style="margin-top:5px;">{$vo[week]}<br />{:geshihuaData($vo[reserve_date])}
                </p>
            </dd>
            {/volist}
        </dl>
    </div>


    <div class="dovtor-jiantou">
        <span> </span>
    </div>
    <div class="dovtor-jiantou2">
        <span> </span>
    </div>

</div>
<div style="padding:10px;padding-top:0px;">
<div class="content-list2"  id="zhuan-list" style="width: 100%;"></div>
    <div style="width: 100%;text-align: center;margin-top:10%;">
        <button class="btn btn-success btn-lg" style="width: 70%;" onclick="nextS()">下一步</button>
    </div>
<div style="margin-top:20px;" class="reserve_info">{:zhuanma($reserve_info)}</div>
</div>
</body>
<script>
    //页面选中的全局变量 传给下个页面
    var reserve_date = '';
    var field = '';

    //初始加载
    $(document).ready(function(){
        var date = getNowFormatDate();
        var _this = $(".date-item").eq(0);
        console.log(_this);
        scheduleDoctorSelect(date,_this)
    });

    //下一步
    function nextS(){
        if(this.reserve_date == ''){
            layer.open({
                content: '请选择日期',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return;
        }
        if(this.field == ''){
            layer.open({
                content: '请选择场次',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return;
        }

        window.location.href="{:url(MODULE_NAME.\'/form\')}?reserve_date="+this.reserve_date+"&field="+this.field;
        this.field='';
    }

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    function scheduleDoctorSelect(date,obj){
        console.log(obj);
        $(".date-item").css({"background-color": "#fff"});
        $(".date-item").css({"color": "#000"});
        $(obj).css({"background-color": "#86dda6"});
        $(obj).css({"color": "#FFF"});
        var _this = $("#zhuan-list");
        _this.empty();
        this.reserve_date = date;
        //loading层
        //layer.open({type: 2});

        //loading带文字
        layer.open({
            type: 2
            ,content: '加载中'
        });

        $.ajax({
            url: '{:url(MODULE_NAME.\'/usabledi\')}',
            type: 'post',
            data: {"date":date},
            success: function (res) {
                layer.closeAll(); // 关闭加载框
                var data = JSON.parse(res);
                console.log(res);
                if(data.info != 'nodata'){

                    $.each(data.info, function(i, item) {
                        var c = '';
                        if(item.field==1){
                            c = '上午场';
                        }else if(item.field==2){
                            c = '下午场';
                        }else if(item.field==3){
                            c = '晚场';
                        }else if(item.field==4){
                            c = '全场';
                        }
                        _this.append('<div class="changci" onclick="selectChangdi('+item.field+',this,'+item.num+')">'+
                                '<div class="changci-title">'+
                                '<p>'+c+'</p>'+
                                '</div>'+
                                '<div class="changci-ct">'+
                                '<p>时间（'+item.time+'）</p>'+
                                '<p>可预约剩余儿童人数(<span style="color:red;">'+item.num+'人</span>)</p>'+
                                '</div>'+
                                '</div>');
                    });

                }else{

                    //无可用场地
                    _this.append('<div class="changci">'+
                            '<p  style="width:100%;margin-top:24px;text-align: center">暂不开放</p>'+
                            '</div>');
                }

            },
            error: function(e) {
                console.log(e)

            }
        })


    }



    //选择半场 全场
    function selectChangdi(ci,obj,num){
        if(num<1){
            layer.open({
                content: '本场已无法预约',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return;
        }

        this.field = ci;
        $(".changci").css({"background-color": "#fff"});
        $(".changci").css({"color": "#000"});
        $(obj).css({"background-color": "#86dda6"});
        $(obj).css({"color": "#FFF"});
    }


</script>


</html>
